<template>
	<div class="goods_list table-theme">
		<head-title title="商品--商家商品"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="classList"
						:value="class_id"
						placeholder="品类"
						type="class_id"
						@value="setSelectValue"
						label-name="class_name"
						value-name="class_id"
					>
					</select-view>
					<select-view
						:option-list="statusList"
						:value="is_sale"
						placeholder="上下架"
						type="is_sale"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
				</div>
			</div>
			<div class="btn-group">
				<div class="btn-item">
					<el-button type="primary" size="small" @click="upDown(2)">批量下架</el-button>
				</div>
				<div class="btn-item">
					<el-button type="primary" size="small" @click="upDown(1)">批量上架</el-button>
				</div>
				<div class="btn-item">
					<el-button type="danger" size="small" @click="del()">批量删除</el-button>
				</div>
			</div>
			<p class="data-number">总商品数：{{ total }}</p>
			<el-table :data="goodsList" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" align="center" prop="store_goods_id"></el-table-column>
				<el-table-column label="型号" align="center" prop="store_goods_sn"></el-table-column>
				<el-table-column label="名称" align="center" prop="store_goods_name"></el-table-column>
				<el-table-column label="品类" align="center" prop="class_name"></el-table-column>
				<el-table-column label="零售价" align="center" prop="retail_price"></el-table-column>
				<!-- <el-table-column label="销量" align="center" prop="user_id"></el-table-column> -->
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_sale" :active-value="1" :inactive-value="2" @change="upDown(0, $event, scope.row.store_goods_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goodsDetails(scope.row.store_goods_id)">详情</el-button>
						<el-button type="primary" size="mini" @click="editGoods(scope.row.store_goods_id)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		name: 'store_goods_list',
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				admin_id: localStorage.getItem('admin_id'),
				goodsList: [], // 商品列表
				total: 0,totalData: 0,  // 数据总数
				class_id: '', // 品类
				is_sale: 1, // 上下架
				page: 0,
				classList: [],
				multipleSelection: [],
				type:1,
				store_id:"",
				searchOption: [
					{
						value: 0,
						label: "型号",
					},
					{
						value: 1,
						label: "ID",
					},
					{
						value: 2,
						label: "商品名",
					},
				],
				classSelect: 0,
				selectContent: "",
				statusList:[
					{
						value:1,
						label:'上架'
					},
					{
						value:2,
						label:'下架'
					}
				],
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					type:this.type,
					class_id: this.class_id,
					is_sale: this.is_sale,
					store_id: this.store_id
				};

				if (this.class_id == 0) {
					delete data.class_id;
				}

				if (this.classSelect == 0) {
					data.store_goods_sn = this.selectContent;
				} else if (this.classSelect == 1) {
					data.store_goods_id = this.selectContent;
				} else if (this.classSelect == 2) {
					data.store_goods_name = this.selectContent;
				}

				this.$http(this.$ApiList.StoreGoodsList, data).then(res => {
					this.goodsList = [];
					res.datas.data.forEach(item => {
						this.goodsList.push(item);
					});
					this.total = res.datas.count;
				});
			},

			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 上下架
			upDown(type, e, id) {
				let data;
				if (type == 0) {
					data = {
						store_goods_id: id,
						is_sale: e
					};
				} else if (type == 1) {
					if (this.multipleSelection.length == 0) {
						return;
					}
					data = {
						store_goods_id: '',
						is_sale: 1
					};
					this.multipleSelection.forEach(item => {
						data.store_goods_id += item.store_goods_id + ',';
					});
					data.store_goods_id = data.store_goods_id.substr(0, data.store_goods_id.length - 1);
				} else if (type == 2) {
					if (this.multipleSelection.length == 0) {
						return;
					}
					data = {
						store_goods_id: '',
						is_sale: 2
					};
					this.multipleSelection.forEach(item => {
						data.store_goods_id += item.store_goods_id + ',';
					});
					data.store_goods_id = data.store_goods_id.substr(0, data.store_goods_id.length - 1);
				}
				this.$http(this.$ApiList.StoreGoodsDown, data).then(res => {
					this.$layer.msg('操作成功');
					this.init(this.page);
				});
				
			},
			refreshPage() {
				this.is_sale = 1;
				this.page = 1;
				this.selectContent = '';
				this.classSelect = 0;
				this.class_id = '';
				this.init()

			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			del() {
				let data;
				this.$confirm('确定删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {

						if (this.multipleSelection.length == 0) {
							return;
						}
						data = {
							store_goods_id: ''
						};
						this.multipleSelection.forEach(item => {
							data.store_goods_id += item.store_goods_id + ',';
						});
						data.store_goods_id = data.store_goods_id.substr(0, data.store_goods_id.length - 1);
						this.$http(this.$ApiList.DeleteStoreGoods, data).then(res => {
							this.$layer.msg('删除成功');
						});
						this.refreshPage();
					})
					.catch(() => {});
			},
			// 商品详情
			goodsDetails(goodsId) {
				this.$router.push({
					path: '/store_goods_details',
					query: {
						type: 1,
						id: goodsId
					}
				});
			},
			editGoods(goodsId){
				this.$router.push({
					path: '/edit_goods',
					query: {
						id: goodsId
					}
				});
			},
			getClass() {
				let data = {
					store_id: localStorage.getItem('shop_id')
				}
				this.$http(this.$ApiList.StoreGoodsClassList, data).then(res => {
					if (res.code == 200) {
						this.classList = res.datas
					}
				});
			},
			setSelectValue(obj){
				const { type,value } = obj
				switch (type) {
					case 'class_id':
						this.class_id = value
						break;
					case 'is_sale':
						this.is_sale = value
						break;
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			if(this.$route.query.type){
				this.type =  this.$route.query.type;
			}
			this.store_id = this.$route.query.store_id?this.$route.query.store_id:localStorage.getItem('store_id');
			this.getClass();
			this.init();
		},
		watch: {
			$route:{
				deep:true,
				handler:function(val){
					if(val.query.type){
						this.type = val.query.type;
					}
					this.init();
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.btn-group {
		display: flex;
		margin-top: 10px;
	}

	.btn-group .btn-item {
		margin-right: 10px;
	}
</style>
